<template>
  <div class="page index">
    <div class="bar">
      <router-link class="button" :to="{name:'create-project'}">Add</router-link>
      <button class="button" @click="logout">Logout</button>
    </div>
    <div class="main">
      <div class="project-board">
        <project v-for="project in projects" v-bind:key="project.id" :project="project" @deleted="getProjects"></project>
        <project-adder class="project"></project-adder>
      </div>
      <div class="big-board-holder">
          <board class="board" v-for="board in boards" v-bind:key="board.id" :data="board"></board>
          <board-adder class="board"></board-adder>
      </div>
      <div style="clear: both;"></div>
    </div>
  </div>
</template>

<script>
    import Project from '../pages/atoms/project';
    import ProjectAdder from '../pages/atoms/project-adder'
    import Board from '../pages/atoms/board';
    import BoardAdder from '../pages/atoms/board-adder'

    import Token from "../libs/token";

    import {getBoards} from "../apis/board";
    import {getProjects} from "../apis/project";

    export default {
        components: {
            'project':Project,
            'project-adder':ProjectAdder,
            'board': Board,
            'board-adder': BoardAdder
        },
        name: "index",
        data() {
            return {
                projects: [],
                boards: []
            }
        },
        methods: {
            getProjects()
            {
                let that = this;
                getProjects().then(res => {
                    that.projects = res.data;
                })
            },
            getBoard()
            {
                getBoards().then((res)=> {
                    if(res.code === 20000){
                        this.boards = res.data
                    }
                })
            },
            logout()
            {
                Token.forgetToken();
                location.reload();
            }
        },
        mounted() {
            this.getProjects();
            this.getBoard();
        }
    }
</script>

<style scoped>
  .index {
    background-color: rgba(242, 242, 242, 0.87);
    width: 100%;
    height: 100vh;
  }

  .bar {
    padding: 10px;
    background-color: white;
    margin-bottom: 5px;
    box-sizing: border-box;
    height: 40px;
  }

  .project-board {
    float: left;
    width: 320px;
    background-color: rgba(217, 217, 217, 0.87);
    box-sizing: border-box;
    height: calc(100vh - 45px);
    overflow: scroll;
    padding: 20px 5px 50px;
  }


  .big-board-holder {
    float: left;
    width: calc(100% - 320px);
    background-color: #f0f0f0;
    min-height: 400px;
    padding: 10px;
    box-sizing: border-box;
    height: calc(100vh - 45px);
    overflow-x: auto;

    display: inline-flex;
    align-items: flex-start;
    flex-flow: row;
  }

  .board {
    margin: 0 10px;
    flex-shrink: 0;
  }
</style>
